<template>
  <div>
    <!--搜索-->
    <div class="toolbar">
      <el-input
        v-model="searchName"
        placeholder="请输入产品名"
        clearable
        style="width: 200px; margin-right: 10px"
      />
      &nbsp;
      <el-input
        v-model="searchPhone"
        placeholder="请输入产品分类"
        clearable
        style="width: 200px; margin-right: 10px"
      />
      &nbsp;
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="default" @click="reset">重置</el-button>
    </div>

    <div v-if="products.length > 0">
      <div
        v-for="item in paginatedProducts"
        :key="item.id"
        style="
          display: inline-block;
          width: calc(25% - 20px);
          margin-top: 20px;
          margin-right: 10px;
        "
      >
        <el-image
          v-if="item.picurl"
          :src="item.picurl"
          fit="cover"
          alt="示例图片"
          :lazy="true"
          style="width: 150px; height: 150px; cursor: pointer"
          @click="cls(item)"
          @error="handleImageError"
        >
          <template #error>
            <div>图片加载失败</div>
          </template>
        </el-image>
        <div>
          <span>{{ item.name }}</span>
          <br />
          <span>${{ item.price }}</span>
        </div>
      </div>
    </div>
    <div v-else>
      <p>没有找到产品信息</p>
    </div>
    <div class="pagination">
      <el-button :disabled="currentPage === 1" @click="currentPage--"
        >上一页</el-button
      >
      <span>第 {{ currentPage }} 页</span>
      <el-button :disabled="currentPage >= totalPages" @click="currentPage++"
        >下一页</el-button
      >
    </div>
    <Details ref="detailsRef" :visible="isShow" @close="isShow = false" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { queryAll } from "@/api/product.js";
import Details from "./ProductDetails.vue";
import host from "@/utils/env.js";
//产品详情：
const detailsRef = ref(null);
const isShow = ref(false);
//图片点击
function cls(item) {
  //把图片信息传给产品详细界面
  detailsRef.value.init(item);
  isShow.value = true;
}
const products = ref([]); // 存储多个产品
const searchName = ref("");
const searchPhone = ref("");
const currentPage = ref(1);
const itemsPerPage = 8; // 每页显示的产品数量

const handleImageError = () => {
  console.log("图片加载出错");
};

// 获取产品数据
const getProducts = async () => {
  try {
    const res = await queryAll();
    if (res.code === 200) {
      products.value = res.data; // 假设返回的数据为产品数组
      currentPage.value = 1; // 重置当前页码
    }
  } catch (err) {
    console.error("获取产品数据失败:", err);
  }
};

// 计算属性用于分页
const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return products.value.slice(start, start + itemsPerPage);
});

// 总页数
const totalPages = computed(() => {
  return Math.ceil(products.value.length / itemsPerPage);
});

// 查询方法
const search = () => {
  console.log(`查询姓名: ${searchName.value}, 手机号: ${searchPhone.value}`);
  getProducts(); // 可根据需要调整
};

// 重置方法
const reset = () => {
  searchName.value = "";
  searchPhone.value = "";
  getProducts(); // 重新获取所有产品
};

// 组件挂载时获取产品数据
getProducts();
</script>

<style scoped>
.toolbar {
  height: 60px;
  padding-left: 20px;
  line-height: 60px;
  background-color: #fff;
}

.pagination {
  margin-top: 20px;
}
</style>
